<script setup lang="ts">
import { useUserInfoStore } from '@/store/userInfo'

// Assets
import identityList from '@/static/viewData/identityList'
import identity0 from '@/static/images/index/0.png'
import identity1 from '@/static/images/index/1.png'
import identity2 from '@/static/images/index/2.png'
import identity3 from '@/static/images/index/3.png'
import identity4 from '@/static/images/index/4.png'
import identity5 from '@/static/images/index/5.png'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const completed = ref(false)

/**
 * @description 选中的 item 的 index。
 */
const selectedItemIndex = ref(0)

onBeforeMount(() => {
  // 如果已登录账号，直接跳转至对应的首页
  if (userInfoStore.userInfo && userInfoStore.userInfo.group_id !== undefined) {
    if (userInfoStore.belongTo(['0']))
      router.replaceAll('userHome')
    else
      router.replaceAll('adminHome')
    setTimeout(() => {
      completed.value = true
    }, 1000)
  }
  else {
    completed.value = true
  }
})

onShareAppMessage(() => {
  return {
    title: '佳宅通',
    path: '/pages/index',
  }
})

onShareTimeline(() => {
  return {
    title: '佳宅通',
    path: '/pages/index',
  }
})

/**
 * @description 使用 index 查找对应 item 的 icon
 *
 * @param index - item 的 index。
 */
function getIconByIndex(index: number) {
  const icons = [identity0, identity1, identity2, identity3, identity4, identity5]
  return icons[index]
}

/**
 * @description 处理确认选择事件。
 */
function handleSelect() {
  router.push({
    name: 'login',
    params: { group_id: `${selectedItemIndex.value}` },
  })
}
</script>

<template>
  <view v-show="completed" class="flex flex-col items-center">
    <Spacer height="30" />
    <!-- Item START -->
    <view
      v-for="identity in identityList"
      :key="identity.index"
      class="flex justify-between items-center w-full px-35rpx py-40rpx mb-20rpx bg-white rounded-20rpx border-2rpx border-solid"
      :class="[selectedItemIndex === identity.index ? 'border-[#FF6D0A]' : 'border-transparent']"
      @tap="selectedItemIndex = identity.index"
    >
      <view class="flex items-center">
        <!-- Icon -->
        <image class="w-80rpx h-80rpx" :src="getIconByIndex(identity.index)" />
        <Spacer width="24" />
        <!-- Content -->
        <view>
          <!-- Title -->
          <view class="text-secondary text-32rpx leading-32rpx font-bold">
            {{ identity.title }}
          </view>
          <Spacer height="15" />
          <!-- Description -->
          <view class="text-tertiary text-28rpx leading-28rpx">
            {{ identity.subtitle }}
          </view>
        </view>
      </view>
      <!-- Checkbox -->
      <Checkbox v-if="selectedItemIndex === identity.index" :checked="true" />
    </view>
    <!-- Item END -->
    <Spacer height="300" />

    <!-- Main Button -->
    <RGButton class="fixed bottom-60rpx left-[50%] -transform-translate-[50%] w-[630rpx]" @tap="handleSelect">
      确认选择
    </RGButton>
  </view>
</template>

<route type="home" lang="yaml">
name: 'index'
style:
  navigationBarTitleText: '选择身份'
  navigationBarBackgroundColor: '#F8F8F8'
</route>
